<template>
	<block>
		<!-- #ifdef MP-ALIPAY -->
		<view class="pager" v-show="isFinished">
			<slot name="navbar"></slot>
			<view
				class="pager-content"
				:style="'padding-top: ' + (clearPaddingTop ? 0 : paddingTop) + 'px; padding-bottom: ' + (clearPaddingBottom ? 0 : paddingBottom) + 'px;'"
			>
				<slot></slot>
			</view>
			<slot name="bottombar"></slot>
		</view>
		<!-- #endif -->
		
		<block v-if="!userInfo && auth">
			<block v-if="customAuth"><slot name="auth"></slot></block>
			<view v-else class="pager-white flex-center" :style="{ width: width, height: height, backgroundColor: backgroundColor }" @touchmove.stop="">
				<empty class="empty" :image="$assets.img(authImage)" description="您还没有登录哦，请先登录！">
					<view class="flex flex-row align-c justify-b">
						<view v-if="showBackButton" style="margin: 0 10rpx;">
							<u-button type="default" @click="clickBackBtn" shape="circle" size="default" :ripple="true" :throttle-time="1000">
								{{ isOnePage ? '返回首页' : '返回上页' }}
							</u-button>
						</view>
						<view style="margin: 0 10rpx;">
							<u-button type="primary" @click="clickLoginBtn" shape="circle" size="default" :ripple="true" :throttle-time="1000">{{ authBtnText }}</u-button>
						</view>
					</view>
				</empty>
			</view>
		</block>
		<block v-else-if="isLoading">
			<block v-if="customLoading"><slot name="loading"></slot></block>
			<view v-else class="pager-white flex-center" :style="{ width: width, height: height, backgroundColor: backgroundColor }" @touchmove.stop="">
				<view class="flex-col flex-center">
					<div class="la-line-scale-pulse-out">
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
					</div>
					<text class="loading-text">{{ loadingText }}</text>
				</view>
			</view>
		</block>
		<block v-else-if="isError">
			<view class="pager-white flex-center" :style="{ width: width, height: height, backgroundColor: backgroundColor }" @touchmove.stop="">
				<empty class="empty" :image="$assets.img(errorImage)" :description="errorMsg">
					<block v-if="customError"><slot name="error"></slot></block>
					<view v-else class="flex flex-row align-c justify-b">
						<view v-if="showBackButton" style="margin: 0 10rpx;">
							<u-button type="default" @click="clickBackBtn" shape="circle" size="default" :ripple="true" :throttle-time="1000">
								{{ isOnePage ? '返回首页' : '返回上页' }}
							</u-button>
						</view>
						<view style="margin: 0 10rpx;">
							<u-button type="primary" @click="clickErrorBtn" shape="circle" size="default" :ripple="true" :throttle-time="1000">{{ errorBtnText }}</u-button>
						</view>
					</view>
				</empty>
			</view>
		</block>
		<block v-else-if="isEmpty">
			<block v-if="customEmpty"><slot name="empty"></slot></block>
			<view v-else class="pager-white flex-center" :style="{ width: width, height: height, backgroundColor: backgroundColor }" @touchmove.stop="">
				<empty class="empty" :image="$assets.img(emptyImage)" :description="emptyMsg">
					<view class="flex flex-row align-c justify-b">
						<view v-if="showBackButton" style="margin: 0 10rpx;">
							<u-button type="default" @click="clickBackBtn" shape="circle" size="default" :ripple="true" :throttle-time="1000">
								{{ isOnePage ? '返回首页' : '返回上页' }}
							</u-button>
						</view>
						<view style="margin: 0 10rpx;">
							<u-button type="primary" :custom-style="{ width: '240rpx' }" @click="clickEmptyBtn" shape="circle" size="default" :ripple="true" :throttle-time="1000">
								{{ emptyBtnText }}
							</u-button>
						</view>
					</view>
				</empty>
			</view>
		</block>
		<!-- #ifdef MP-WEIXIN -->
		<block v-else-if="isFinished">
			<view class="pager">
				<slot name="navbar"></slot>
				<view
					class="pager-content"
					:style="'padding-top: ' + (clearPaddingTop ? 0 : paddingTop) + 'px; padding-bottom: ' + (clearPaddingBottom ? 0 : paddingBottom) + 'px;'"
				>
					<slot></slot>
				</view>
				<slot name="bottombar"></slot>
			</view>
		</block>
		<!-- #endif -->
		<block v-else-if="!isHasNetwork">
			<view class="pager-white flex-center" :style="{ width: width, height: height, backgroundColor: backgroundColor }" @touchmove.stop="">
				<empty class="empty" :image="$assets.img(notNetworkImage)" description="网络连接不可用，请检查网络设置">
					<block v-if="customNetwork"><slot name="network"></slot></block>
					<view v-else class="flex flex-row align-c justify-b">
						<view v-if="showBackButton" style="margin: 0 10rpx;">
							<u-button type="default" @click="clickBackBtn" shape="circle" size="default" :ripple="true" :throttle-time="1000">
								{{ isOnePage ? '返回首页' : '返回上页' }}
							</u-button>
						</view>
						<view style="margin: 0 10rpx;">
							<u-button
								type="primary"
								:custom-style="{ width: '240rpx' }"
								@click="clickNoNetworkBtn"
								shape="circle"
								size="default"
								:ripple="true"
								:throttle-time="1000"
							>
								{{ noNetworkBtnText }}
							</u-button>
						</view>
					</view>
				</empty>
			</view>
		</block>
	</block>
</template>

<script>
import Vue from 'vue'
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'pager',
	components: {},
	props: {
		vmLevel: {
			type: Number,
			default: 1
		},
		//高度
		height: {
			type: String,
			default: '100vh'
		},
		//宽度
		width: {
			type: String,
			default: '100vw'
		},
		authBtnText: {
			type: String,
			default: '点击登录'
		},
		emptyBtnText: {
			type: String,
			default: '点击刷新'
		},
		errorBtnText: {
			type: String,
			default: '点击重试'
		},
		noNetworkBtnText: {
			type: String,
			default: '点击重试'
		},
		errorBtnEvent: {
			type: Boolean,
			default: false
		},
		emptyBtnEvent: {
			type: Boolean,
			default: false
		},
		noNetworkBtnEvent: {
			type: Boolean,
			default: false
		},
		autoLoad: {
			type: Boolean,
			default: true
		},
		auth: {
			type: Boolean,
			default: false
		},
		showNavBarLoading: {
			type: Boolean,
			default: false
		},
		authImage: {
			type: String,
			default: '/static/images/common/auth-icon.png'
		},
		errorImage: {
			type: String,
			default: '/static/images/common/error-icon.png'
		},
		emptyImage: {
			type: String,
			default: '/static/images/common/search-icon.png'
		},
		notNetworkImage: {
			type: String,
			default: '/static/images/common/network-icon.png'
		},
		navbar: {
			type: Boolean,
			default: false
		},
		bottombar: {
			type: Boolean,
			default: false
		},
		clearPaddingTop: {
			type: Boolean,
			default: false
		},
		clearPaddingBottom: {
			type: Boolean,
			default: false
		},
		checkNetwork: {
			type: Boolean,
			default: true
		},
		customAuth: {
			type: Boolean,
			default: false
		},
		customError: {
			type: Boolean,
			default: false
		},
		customLoading: {
			type: Boolean,
			default: false
		},
		customEmpty: {
			type: Boolean,
			default: false
		},
		customNetwork: {
			type: Boolean,
			default: false
		},
		navbarClass: {
			type: String,
			default: 'navbar'
		},
		bottombarClass: {
			type: String,
			default: 'bottombar'
		},
		showBackButton: {
			type: Boolean,
			default: false
		},
		backgroundColor: {
			type: String,
			default: '#000000'
		}
	},
	computed: {
		...mapState({
			userInfo: ({ app }) => app.userInfo
		})
	},
	data() {
		return {
			isOnePage: false,
			loadingVisible: false,
			loadingText: '正在加载数据中',
			isLoading: true,
			isFinished: false,
			isHasNetwork: true,
			isError: false,
			errorMsg: '抱歉，加载数据失败',
			isEmpty: false,
			emptyMsg: '抱歉，这儿没有数据',
			paddingTop: 0,
			paddingBottom: 0
		}
	},
	created() {
		const vm = this
		vm.isOnePage = getCurrentPages().length == 1
		uni.$on('LOGIN_SUCCESS', vm.loginSuccess)
	},
	destroyed() {
		const vm = this
		uni.$off('LOGIN_SUCCESS', vm.loginSuccess)
		
		uni.offNetworkStatusChange(vm.onNetworkStatusChange)
	},
	mounted() {
		const vm = this

		if (vm.navbar) {
			vm.$nextTick(function() {
				vm.countPaddingTop()
			})
		}

		if (vm.bottombar) {
			vm.$nextTick(function() {
				vm.countPaddingBottom()
			})
		}

		if (!vm.userInfo && vm.auth) {
			vm.isLoading = false
			return
		}

		if (vm.autoLoad) {
			vm.loadData()
		}

		if (vm.checkNetwork) {
			// 监听网络状态变化
			uni.onNetworkStatusChange(vm.onNetworkStatusChange)
		}
	},
	methods: {
		onNetworkStatusChange(res) {
			const vm = this
			
			console.log('网络状态变化', res)
			
			// 有网络
			if (res.isConnected) {
				vm.isHasNetwork = true
				if (vm.isFinished && !vm.isEmpty) {
					vm.isLoading = false
				} else {
					vm.loadData(true)
				}
			} else {
				//无网络
				if (!vm.isFinished) {
					vm.isError = false
					vm.isHasNetwork = false
					if (vm.showNavBarLoading) {
						uni.hideNavigationBarLoading()
					}
				}
			}
			vm.isEmpty = false
			vm.isLoading = false
		},
		getPaddingBottom() {
			return this.paddingBottom
		},
		getPaddingTop() {
			return this.paddingTop
		},
		loginSuccess() {
			const vm = this
			if (!vm.isFinished) {
				vm.loadData()
			}
		},
		finish() {
			const vm = this
			vm.isFinished = true
			vm.isLoading = false
			vm.isError = false
			vm.isEmpty = false
			if (vm.showNavBarLoading) {
				uni.hideNavigationBarLoading()
			}
			// #ifdef MP-WEIXIN
			uni.stopPullDownRefresh()
			// #endif
			// #ifdef MP-ALIPAY
			my.stopPullDownRefresh()
			// #endif
			vm.$nextTick(function() {
				vm.$emit('onFinish')
				vm.countPadding()
			})
		},
		countPadding() {
			const vm = this

			if (vm.navbar) {
				vm.$nextTick(function() {
					vm.countPaddingTop()
				})
			}

			if (vm.bottombar) {
				vm.$nextTick(function() {
					vm.countPaddingBottom()
				})
			}
		},
		error(message) {
			const vm = this
			if (message == '网络连接不可用，请检查网络设置') {
				console.log('无网络')
				vm.network()
				return
			}
			if (message) {
				vm.errorMsg = message
			}
			vm.isFinished = false
			vm.isEmpty = false
			vm.isError = true
			vm.isLoading = false
			if (vm.showNavBarLoading) {
				uni.hideNavigationBarLoading()
			}
			// #ifdef MP-WEIXIN
			uni.stopPullDownRefresh()
			// #endif
			// #ifdef MP-ALIPAY
			my.stopPullDownRefresh()
			// #endif
		},
		empty(message) {
			const vm = this
			if (message) {
				vm.emptyMsg = message
			}
			vm.isFinished = false
			vm.isError = false
			vm.isEmpty = true
			vm.isLoading = false
			if (vm.showNavBarLoading) {
				uni.hideNavigationBarLoading()
			}
			// #ifdef MP-WEIXIN
			uni.stopPullDownRefresh()
			// #endif
			// #ifdef MP-ALIPAY
			my.stopPullDownRefresh()
			// #endif
		},
		network() {
			const vm = this
			vm.isLoading = false
			vm.isError = false
			vm.isFinished = false
			vm.isHasNetwork = false
			if (vm.showNavBarLoading) {
				uni.hideNavigationBarLoading()
			}
			// #ifdef MP-WEIXIN
			uni.stopPullDownRefresh()
			// #endif
			// #ifdef MP-ALIPAY
			my.stopPullDownRefresh()
			// #endif
		},
		clickBackBtn() {
			const vm = this
			if (vm.isOnePage) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			} else {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		clickErrorBtn() {
			const vm = this
			if (vm.errorBtnEvent) {
				vm.$emit('tapErrorBtn')
				return
			}
			vm.loadData(true)
		},
		clickLoginBtn() {
			const vm = this
			vm.$utils.isLogined()
		},
		clickEmptyBtn() {
			const vm = this
			if (vm.emptyBtnEvent) {
				vm.$emit('tapEmptyBtn')
				return
			}
			vm.loadData(true)
		},
		clickNoNetworkBtn() {
			const vm = this
			if (vm.noNetworkBtnEvent) {
				vm.$emit('tapNoNetworkBtn')
				return
			}
			vm.loadData(true)
		},
		loadData(isDelay) {
			const vm = this

			let delay = 0

			if (isDelay) {
				delay = 300
			}

			if (!vm.userInfo && vm.auth) {
				vm.isLoading = false
				return
			}

			vm.isFinished = false
			vm.isLoading = true
			vm.isError = false
			vm.isEmpty = false

			setTimeout(() => {
				if (vm.checkNetwork) {
					// 获取网络类型
					uni.getNetworkType({
						success: res => {
							// #ifdef MP-WEIXIN
							if (res.networkType == 'none' || res.networkType == 'unknown') {
								// 无网络，显示无网络提示
								vm.isLoading = false
								vm.isFinished = false
								vm.isHasNetwork = false
								if (vm.showNavBarLoading) {
									uni.hideNavigationBarLoading()
								}
								console.log('微信 pager 检测网络，无网络', res)
							} else {
								// 有网络，开始加载数据
								vm.isLoading = true
								vm.isFinished = false
								vm.isHasNetwork = true
								if (vm.showNavBarLoading) {
									uni.showNavigationBarLoading()
								}
								vm.$emit('loadData')
								console.log('微信 pager 检测网络，有网络', res)
							}
							// #endif
							
							// #ifdef MP-ALIPAY
							if (!res.networkAvailable) {
								// 无网络，显示无网络提示
								vm.isLoading = false
								vm.isFinished = false
								vm.isHasNetwork = false
								if (vm.showNavBarLoading) {
									uni.hideNavigationBarLoading()
								}
								console.log('支付宝 pager 检测网络，无网络', res)
							} else {
								// 有网络，开始加载数据
								vm.isLoading = true
								vm.isFinished = false
								vm.isHasNetwork = true
								if (vm.showNavBarLoading) {
									uni.showNavigationBarLoading()
								}
								vm.$emit('loadData')
								console.log('支付宝 pager 检测网络，有网络', res)
							}
							// #endif
						},
						fail: res => {
							// 获取网络失败，就认为无网络
							console.log('获取网络状态失败', res)
							vm.isLoading = false
							vm.isFinished = false
							vm.isHasNetwork = false
							if (vm.showNavBarLoading) {
								uni.hideNavigationBarLoading()
							}
						}
					})
				} else {
					// 有网络，开始加载数据
					vm.isLoading = true
					vm.isFinished = false
					if (vm.showNavBarLoading) {
						uni.showNavigationBarLoading()
					}
					vm.$emit('loadData')
				}
			}, delay)
		},
		loading(text) {
			const vm = this
			vm.isFinished = false
			vm.isLoading = true
			vm.isError = false
			vm.isEmpty = false
			if (text != undefined && text.length > 0) {
				vm.loadingText = text
			} else {
				vm.loadingText = '正在加载数据中'
			}
		},
		countPaddingTop() {
			const vm = this
			if (!vm.navbar) {
				return
			}

			//#ifdef MP-WEIXIN
			vm.$utils.getViewHeight(vm, '.navbar', vm.vmLevel).then(result => {
				console.log('countPaddingTop==' + result)
				vm.paddingTop = result
				vm.$emit('onPaddingTop', vm.paddingTop)
			})
			//#endif

			//#ifdef MP-ALIPAY
			vm.$utils.getViewHeight(vm, '.' + vm.navbarClass, vm.vmLevel).then(result => {
				console.log('countPaddingTop==' + result)
				vm.paddingTop = result
				vm.$emit('onPaddingTop', vm.paddingTop)
			})
			//#endif
		},
		countPaddingBottom() {
			const vm = this
			if (!vm.bottombar) {
				return
			}

			//#ifdef MP-WEIXIN
			vm.$utils.getViewHeight(vm, '.bottombar', vm.vmLevel).then(result => {
				console.log('countPaddingBottom==' + result)
				vm.paddingBottom = result
				vm.$emit('onPaddingBottom', vm.paddingBottom)
			})
			//#endif

			//#ifdef MP-ALIPAY
			vm.$utils.getViewHeight(vm, '.' + vm.bottombarClass, vm.vmLevel).then(result => {
				console.log('countPaddingBottom==' + result)
				vm.paddingBottom = result
				vm.$emit('onPaddingBottom', vm.paddingBottom)
			})
			//#endif
		}
	}
}
</script>
<style scoped lang="scss">
.pager {
}
.loading-text {
	font-size: 28rpx;
	color: #969799;
	margin-top: 60rpx;
}

.la-line-scale-pulse-out,
.la-line-scale-pulse-out > div {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.la-line-scale-pulse-out {
	display: block;
	font-size: 0;
	color: #67bd03;
}
.la-line-scale-pulse-out.la-dark {
	color: #333;
}
.la-line-scale-pulse-out > div {
	display: inline-block;
	float: none;
	background-color: currentColor;
	border: 0 solid currentColor;
}
.la-line-scale-pulse-out {
	width: 40px;
	height: 32px;
}
.la-line-scale-pulse-out > div {
	width: 4px;
	height: 32px;
	margin: 2px;
	margin-top: 0;
	margin-bottom: 0;
	border-radius: 0;
	-webkit-animation: line-scale-pulse-out 0.9s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
	-moz-animation: line-scale-pulse-out 0.9s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
	-o-animation: line-scale-pulse-out 0.9s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
	animation: line-scale-pulse-out 0.9s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}
.la-line-scale-pulse-out > div:nth-child(3) {
	-webkit-animation-delay: -0.9s;
	-moz-animation-delay: -0.9s;
	-o-animation-delay: -0.9s;
	animation-delay: -0.9s;
}
.la-line-scale-pulse-out > div:nth-child(2),
.la-line-scale-pulse-out > div:nth-child(4) {
	-webkit-animation-delay: -0.7s;
	-moz-animation-delay: -0.7s;
	-o-animation-delay: -0.7s;
	animation-delay: -0.7s;
}
.la-line-scale-pulse-out > div:nth-child(1),
.la-line-scale-pulse-out > div:nth-child(5) {
	-webkit-animation-delay: -0.5s;
	-moz-animation-delay: -0.5s;
	-o-animation-delay: -0.5s;
	animation-delay: -0.5s;
}
.la-line-scale-pulse-out.la-sm {
	width: 20px;
	height: 16px;
}
.la-line-scale-pulse-out.la-sm > div {
	width: 2px;
	height: 16px;
	margin: 1px;
	margin-top: 0;
	margin-bottom: 0;
}
.la-line-scale-pulse-out.la-2x {
	width: 80px;
	height: 64px;
}
.la-line-scale-pulse-out.la-2x > div {
	width: 8px;
	height: 64px;
	margin: 4px;
	margin-top: 0;
	margin-bottom: 0;
}
.la-line-scale-pulse-out.la-3x {
	width: 120px;
	height: 96px;
}
.la-line-scale-pulse-out.la-3x > div {
	width: 12px;
	height: 96px;
	margin: 6px;
	margin-top: 0;
	margin-bottom: 0;
}
@-webkit-keyframes line-scale-pulse-out {
	0% {
		-webkit-transform: scaley(1);
		transform: scaley(1);
	}
	50% {
		-webkit-transform: scaley(0.3);
		transform: scaley(0.3);
	}
	100% {
		-webkit-transform: scaley(1);
		transform: scaley(1);
	}
}
@-moz-keyframes line-scale-pulse-out {
	0% {
		-moz-transform: scaley(1);
		transform: scaley(1);
	}
	50% {
		-moz-transform: scaley(0.3);
		transform: scaley(0.3);
	}
	100% {
		-moz-transform: scaley(1);
		transform: scaley(1);
	}
}
@-o-keyframes line-scale-pulse-out {
	0% {
		-o-transform: scaley(1);
		transform: scaley(1);
	}
	50% {
		-o-transform: scaley(0.3);
		transform: scaley(0.3);
	}
	100% {
		-o-transform: scaley(1);
		transform: scaley(1);
	}
}
@keyframes line-scale-pulse-out {
	0% {
		-webkit-transform: scaley(1);
		-moz-transform: scaley(1);
		-o-transform: scaley(1);
		transform: scaley(1);
	}
	50% {
		-webkit-transform: scaley(0.3);
		-moz-transform: scaley(0.3);
		-o-transform: scaley(0.3);
		transform: scaley(0.3);
	}
	100% {
		-webkit-transform: scaley(1);
		-moz-transform: scaley(1);
		-o-transform: scaley(1);
		transform: scaley(1);
	}
}
</style>
